<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      .form-select {
        width: 103px;
        display: inline-block;
      }
      .col-form-label {
        text-align: right;
      }
      .figure-img {
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
      #upload {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="p-5">个人设置</h1>
      <form class="col-4">
        <div class="row mb-3">
          <label class="col-form-label col-3">昵称：</label>
          <div class="col-9">
            <input class="form-control col-9" type="text" name="nickname" />
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">籍贯：</label>
          <div class="col-9">
            <select class="form-select col-4" name="province">
              <option value="">--省--</option>
            </select>
            <select class="form-select col-4" name="city">
              <option value="">--市--</option>
            </select>
            <select class="form-select col-4" name="area">
              <option value="">--区--</option>
            </select>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-form-label col-3">头像：</label>
          <div class="col-9">
            <input class="form-control col-9" type="hidden" name="avatar" />
            <figure class="figure">
              <input type="file" id="upload" />
              <img
                src="https://yanxuan-item.nosdn.127.net/12a882699bd531a1bd428bffe1989525.jpg"
                class="figure-img img-fluid rounded"
                alt="..."
              />
              <figcaption class="figure-caption">修改头像</figcaption>
            </figure>
          </div>
        </div>
        <div class="row mb-3">
          <label class="col-3"></label>
          <div class="col-9">
            <button class="btn btn-primary">保存</button>
          </div>
        </div>
      </form>
    </div>

    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script>
      // 1. 基地址
      axios.defaults.baseURL = 'http://ajax-api.itheima.net'
      // 2. 获取用户信息 +渲染
      window.onload = async function () {
        const res = await axios({
          url: '/api/settings',
        })
        console.log('res:', res)
        // 解构
        const { area, avatar, city, nickname, province } = res.data.data
        // 头像 和名字
        document.querySelector('[name=nickname]').value = nickname
        document.querySelector('.figure-img').src = avatar

        // ---------- 获取省的数据 ----------
        // 1.接口调用
        const proRes = await axios({
          url: '/api/province',
        })
        // 2.保存标签
        const proSel = document.querySelector('[name=province]')
        // 3. 生成option
        proSel.innerHTML = proRes.data.data
          .map((v) => {
            return `<option value="${v}">${v}</option>`
          })
          .join('')
        // 4.设置选中某个省 select标签value
        // 选中对应的option标签
        proSel.value = province

        // ---------- 获取市的数据 ----------
        // 1.接口调用
        const cityRes = await axios({
          url: '/api/city',
          params: {
            pname: province,
          },
        })
        // console.log('cityRes:', cityRes)
        // 2.保存标签
        const citySel = document.querySelector('[name=city]')
        // 3.生成option
        citySel.innerHTML = cityRes.data.data
          .map((v) => {
            return `<option value="${v}">${v}</option>`
          })
          .join('')
        // 4.设置选中某个市 select标签value
        citySel.value = city

        // ---------- 获取区的数据 ----------
        // 1.接口调用
        const areaRes = await axios({
          url: '/api/area',
          params: {
            pname: province,
            cname: city,
          },
        })
        // console.log('areaRes:', areaRes)
        // 2.保存标签
        const areaSel = document.querySelector('[name=area]')
        // 3.生成option
        areaSel.innerHTML = areaRes.data.data
          .map((v) => {
            return `<option value="${v}">${v}</option>`
          })
          .join('')
        // 4.设置选中某个区 select标签value
        areaSel.value = area

        // ---------- 省市区联动  省 改变 ----------
        proSel.onchange = async function () {
          // console.log('重新选择了省')
          // 1. 基于省发请求 获取 对应市
          // 获取到市->option->设置给Select
          // 接口调用
          const cityRes = await axios({
            url: '/api/city',
            params: {
              pname: this.value,
            },
          })
          // 生成option
          citySel.innerHTML = cityRes.data.data
            .map((v) => {
              return `<option value="${v}">${v}</option>`
            })
            .join('')

          // 2. 基于省和市发请求 获取 对应区
          // console.log('citySel.value:', citySel.value)
          const areaRes = await axios({
            url: '/api/area',
            // 当前选中的省市
            params: {
              pname: this.value,
              cname: citySel.value,
            },
          })
          // 3.生成option
          areaSel.innerHTML = areaRes.data.data
            .map((v) => {
              return `<option value="${v}">${v}</option>`
            })
            .join('')
        }

        // ---------- 市改变 重新获取对应的区 ----------
        citySel.onchange = async function () {
          // 2. 基于省和市发请求 获取 对应区
          const areaRes = await axios({
            url: '/api/area',
            // 当前选中的省市
            params: {
              pname: proSel.value, // 通过省标签获取value
              cname: this.value, // 通过this获取城市的value
            },
          })
          // 3.生成option
          areaSel.innerHTML = areaRes.data.data
            .map((v) => {
              return `<option value="${v}">${v}</option>`
            })
            .join('')
        }
      }
    </script>
  </body>
</html>
